<%@ include file="/common.jsp"%>  
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<title>酱出名门人事工资管理平台</title>
		<style type="text/css">
			label, input { display:block; }
			input.text { margin-bottom:12px; width:95%; padding: .4em; }
			fieldset { padding:0; border:0; margin-top:25px; }
		</style>
	</head>

	<BODY>
		<div class="main">
			<%@include file="/head.jsp"%>
			<div class="nav">
				<ul>
					<li>
						<a href="areaAction.action">区域管理</a>
					</li>
					<li class="nav_pic"></li>

				</ul>
			</div>
			<div class="center">
				<div align="left"
					style="padding: 0; margin-left: 20px; margin-top: 10px">
					<a id="btn_area_add" >添加区域</a>
				</div>
				<div>
					<table id="area_table"
						style="width: 984px; padding: 0; margin: 10px 20px"
						cellspacing="0">
						<thead>
							<th scope="col">
								序号
							</th>
							<th scope="col">
								名称
							</th>
							<th scope="col">
								操作
							</th>
						</thead>
						<tbody>
						</tbody>
					</table>
					</div>
					<div style="float:left;margin-left:22px; width: 984px">  
							<div style='float: left; line-height: 28px;vertical-align: middle'>
							<span id="page_info"></span>
                             <a id="page_first" herf="#">首页</a> 
                             <a id="page_prev" herf="#">上一页</a> 
                             <a id="page_next" herf="#">下一页</a> 
                             <a id="page_last" herf="#">尾页</a>
                             <input id="page_num" type="text" class="text ui-widget-content ui-corner-all" style="height:24px;line-height:24px;width:20px;padding: 0px">
                             <a id="page_goto" herf="#">转</a> 
							</div>
					</div>		
			</div>

			<div class="clear"></div>
			<div class="footer">
				酱出名门人事工资管理平台 版权所有
			</div>
		</div>
		<div id="add_dialog" title="创建区域" style="display: none">
			<form>
				<fieldset>
				<label for="name" style="float: left">区域名称</label>
				<input type="text"  id="add_area_name" class="text ui-widget-content ui-corner-all" />
				</fieldset>
			</form>
		</div>
		<div id="update_dialog" title="编辑区域" style="display: none">
			<form>
				<fieldset>
				<label for="name" style="float: left">区域名称</label>
				<input type="text"  id="update_area_name" class="text ui-widget-content ui-corner-all" />
				</fieldset>
			</form>
		</div>
	</body>
	<script type="text/javascript">
	$(function() {
		$( "#dialog:ui-dialog" ).dialog( "destroy" );

	    var add_area_name = $("#add_area_name"), 
        	update_area_name = $("#update_area_name");
		
		$('#add_dialog').dialog({
			autoOpen: false,
			height: 200,
			width: 350,
			modal: true,
			buttons: {
				"创建":function() {
			        var name = $.trim(add_area_name.val());
			        
					if (name.length == 0) {
						alert("区域名不能为空!");
					} else {
						addArea(name);
					}
				},
				"取消":function() {
					$(this).dialog("close");
				}
			},
			close: function() {
				add_area_name.val("");
			}
		});

		$('#update_dialog').dialog({
			autoOpen: false,
			height: 200,
			width: 350,
			modal: true,
			buttons: {
				"保存":function() {
	        		var name = $.trim(update_area_name.val());
	        
					if (name.length == 0) {
						alert("区域名不能为空!");
					} else {
						var areaId = update_area_name.data("areaId");
						updateArea(areaId ,name);
					}
				},
				"取消":function() {
					$(this).dialog( "close" );
				}
			},
			close: function() {
				update_area_name.val("");
				update_area_name.removeData("areaId");
				update_area_name.removeData("name");
			}
		});
		

		
		$("#btn_area_add").button().click(function() {
			$("#add_dialog").dialog("open");
		});
        $("#page_first").button();
        $("#page_prev").button();
        $("#page_next").button();
        $("#page_last").button();
        $("#page_goto").button();
		findByPage(0);
	});

    
    function addArea(name) {
		var areaObjRef = new areaObj();
		areaObjRef.name= name;
		var areaJson = JSON.stringify(areaObjRef);

    	$.ajax({
 		   type: "POST",
 		   url: "areaAction!addArea.action",
 		   data: "areaJson=" + areaJson +  "&timestamp=" + new Date().getTime(),
 		   success: function(msg){
    	   	  addAreaCallback(msg);
 		   },
 		   error:function (textStatus) {
     		  alert(textStatus); 
     	   }
    	})
    }

    function addAreaCallback(msg) {
        switch (msg.status.code) {
        case "SUCCES" :
        	$('#add_dialog').dialog("close");
        	alert(msg.status.message);
        	findByPage(0);
        	
            break;
        case "FAIL" :
        	alert(msg.status.message);
            break; 
        }
    }
    

	function delArea(areaId, name) {
		
        var isdel = window.confirm("是否要删除" + name + "区域,单击确定继续,单击取消停止!");
        if (isdel) {
    		$.ajax( {
    			type : "POST",
    			url : "areaAction!deleteArea.action",
    			data : "areaId=" + areaId
    					+ "&timestamp=" + new Date().getTime(),
    			success : function(msg) {
    				delAreaCallback(msg);
    				
    			},
    			error : function(textStatus) {
    				alert("网络异常请稍后重试!");
    			}
    		});
        }

	}

    function delAreaCallback(msg) {
        switch (msg.status.code) {
        case "SUCCES" :
        	alert(msg.status.message);
        	
        	var areaId =  msg.datas;

        	$("#tr_"+areaId).remove();
            break;
        case "FAIL" :
        	alert(msg.status.message);
            break; 
        }
    }



    

	function preUpdateArea(areaId, name) {
    	$("#update_dialog").dialog("open");
    	$("#update_area_name").val(name);
    	$("#update_area_name").data("areaId", areaId);  
	}
	

	function updateArea(areaId, name) {
		$("#update_area_name").data("name", name);  
		var areaObjRef = new areaObj();
		areaObjRef.areaId = areaId;
		areaObjRef.name= name;
		var areaJson = JSON.stringify(areaObjRef);
        //alert(areaJson);
        
		$.ajax( {
			type : "POST",
			url : "areaAction!updateArea.action",
			data : "areaJson=" + areaJson + "&timestamp=" + new Date().getTime(),
			beforeSend :function(reuqest) {
				$("#update_dialog").dialog({ disabled: true });
			},
			success : function(msg) {
				updateAreaCallback(msg);
			},
			complete :function(reuqest, textStatus) {
				$("#update_dialog").dialog({ disabled: false });
			},
			error : function(textStatus) {
				alert("网络异常请稍后重试!");
			}
		});
	}

    function updateAreaCallback(msg) {
        switch (msg.status.code) {
        case "SUCCES" :
        	var name = $("#update_area_name").data("name");
        	var areaId =  msg.datas;
        	$('#update_dialog').dialog("close");

        	$("#tr_"+areaId).find("td:eq(0)").html(name);

        	$("#tr_"+areaId).find("td:eq(1)").find("a:eq(0)").attr("onclick", "preUpdateArea("+areaId+",'"+name+"')");
        	alert(msg.status.message);        	
            break;
        case "FAIL" :
        	alert(msg.status.message);
            break; 
        }
    }
	
    
	function findByPage(startIndex) {
		var pageObjRef = new pageObj();

		pageObjRef.startIndex = startIndex;

		$.ajax( {
			type : "POST",
			url : "areaAction!findByPage.action",
			data : "paginationJson=" + JSON.stringify(pageObjRef)
					+ "&timestamp=" + new Date().getTime(),
			success : function(msg) {
				findByPageCallback(msg);
			},
			error : function(textStatus) {
				alert("网络异常请稍后重试!");
			}
		});
	}

	function findByPageCallback(msg) {
		switch (msg.status.code) {
		case "SUCCES":
			showAreas(msg.datas);
			break;
		case "FAIL":
			alert(msg.status.message);
			break;
		case "EMPTY":
			alert(msg.status.message);
			break;
		}
	}

	function showAreas(datas) {
		$("#area_table tbody tr").remove();
		var items = datas.items;
        //alert(items);
		for ( var i = 0; i < items.length; i++) {
			var tr = $("<tr></tr>")
					.attr("id", "tr_" + items[i].areaId);
			tr.append($("<th scope='row' class='spec'></th>").html(i + 1)).append(
					$("<td></td>").html(items[i].name));

			var lastCol = $("<td></td>");
			var updateBtn = $("<a></a>");
			updateBtn.attr("href", "#");
			updateBtn.html("修改");
			updateBtn.attr("onclick", "preUpdateArea(" + items[i].areaId + ",'"
					+ items[i].name + "')");

			var delBtn = $("<a></a>");
			delBtn.attr("href", "#");
			delBtn.html("删除");
			delBtn.attr("onclick", "delArea(" + items[i].areaId + ",'"
					+ items[i].name + "')");

			lastCol.append(updateBtn);
			lastCol.append("&nbsp;|&nbsp;");
			lastCol.append(delBtn);
			tr.append(lastCol);

			$("#area_table tbody").append(tr);
		}

		setPageBtnClick(datas);
		setPageInfo(datas);
	}

	function setPageInfo(datas) {
		$("#page_info").empty();
		$("#page_info").html(
				"共有&nbsp;" + datas.totalCount + "&nbsp;条数据&nbsp;&nbsp;"
						+ "每页&nbsp;" + datas.pageSize + "&nbsp;条&nbsp;当前&nbsp;"
						+ (datas.currentPageIndex + 1) + "/"
						+ datas.indexes.length + "页");

	}
	function setPageBtnClick(datas) {
		$("#page_first").unbind("click");
		$("#page_prev").unbind("click");
		$("#page_next").unbind("click");
		$("#page_last").unbind("click");
		$("#page_goto").unbind("click");

		$("#page_first").click(function() {
			findByPage(0);
		});

		$("#page_prev").click(function() {
			var startIndex = 0;
			if (datas.currentPageIndex >= 0) {
				if (datas.indexes.length > 0) {
					startIndex = datas.indexes[datas.currentPageIndex - 1];
				}
			}
			findByPage(startIndex);
		});

		$("#page_next").click(function() {
			var startIndex = 0;

			if (datas.indexes.length > 0) {
				if (datas.currentPageIndex + 1 >= datas.indexes.length) {
					startIndex = datas.indexes[datas.indexes.length - 1];
				} else {
					startIndex = datas.indexes[datas.currentPageIndex + 1];
				}

			}
			findByPage(startIndex);
		});

		$("#page_last").click(function() {
			var startIndex = 0;
			if (datas.indexes.length > 0) {
				startIndex = datas.indexes[datas.indexes.length - 1];
			}

			findByPage(startIndex);
		});

		$("#page_goto").click(
				function() {
					var startIndex = 0;
					if ($("#page_num").val() == null
							|| $("#page_num").val().length == 0) {
						alert("请填写要跳转的页面!");
						return;
					}

					if (isNaN($("#page_num").val())) {
						alert("页面必须是数字!");
						return;
					}

					if ($("#page_num").val() <= 0) {
						alert("该页面不存在!");
						return;
					}

					startIndex = datas.indexes[$("#page_num").val() - 1];
					findByPage(startIndex);

				});
	}

	function pageObj() {
		this.pageSize = 5;
		this.startIndex = 0;
	}

	function areaObj() {
		this.areaId = null;
		this.name = "";
	}
</script>
</html>
